<template>
    <div class="outcryconfiguration">
      <h1>接口调用配置：</h1>
      <el-table
        :data="tableData"
        border
        style="width: 95%">
        <el-table-column
          prop="codeKey"
          label="参数名"
          width="200">
        </el-table-column>
        <el-table-column
          prop="codeValue"
          label="参数"
          >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <kt-button :label="$t('编辑')" perms="correspondence:button:edit" type="primary" @click="handleEdit(scope.row)" size="small"/>
          </template>
        </el-table-column>
      </el-table>

      <!--编辑参数界面-->
    <el-dialog class="add-pop" :title="operation?'新增':'编辑参数'" width="40%" :visible.sync="dialogParameter" :close-on-click-modal="false">
            <el-form >
                <el-table :data="ParameterForm" border style="margin-top:0;">
                  <el-table-column
                      width="100px"
                      label="参数名">
                      <template slot-scope="scope">
                          {{scope.row.parameterName}}
                      </template>
                  </el-table-column>
                  <el-table-column
                      label="参数" style="width:80%;">
                      <template slot-scope="scope">
                              <el-form-item>
                                  <el-input style="width:400px" v-bind:disabled="disInputPram"  v-model="scope.row.value" ></el-input>
                              </el-form-item>
                      </template>
                  </el-table-column>
              </el-table>
            </el-form>

		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click.native="dialogParameter = false">{{$t('action.cancel')}}</el-button>
			<el-button size="small" type="primary"  @click="submit">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>
    </div>
</template>

<script>
    import KtButton from "@/views/Core/KtButton";
    import api from "@/http/api";
    import axios from 'axios'
    export default {
      name: "outcry-configuration",
      components: {
        KtButton
      },
      data(){
        return{
          size:'small',
          resetVisible:false,
          disInputPram:false,
          tableData: [],

          model:
          {
             rules: {
                    input:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                },
          },
          

          operation: false, // true:新增, false:编辑
          dialogParameter: false, // 新增编辑界面是否显示
          
          ParameterForm: [{
            id:"",
            parameterName:"",
            value:""
          }]
        }
      },

      methods: {
        // 获取配置列表
        getTqConfig() {
            this.$api.user.getTqConfig().then(res => {
              if (res.result == 1) {
                this.tableData = res.tqConfigList;
              } else {
                this.$message({
                  message: "获取失败, " + res.msg,
                  type: "error"
                });
              }
            });
        },

        // 显示编辑界面
        handleEdit(dataInfo) {
          
          this.dialogParameter = true;
          this.operation = false;
        
          this.ParameterForm=[
             {
               id:dataInfo.id,
               parameterName:dataInfo.codeKey,
               value:dataInfo.codeValue
             }
           ]
           
          //点击编辑的时候，如果parameterName=appid，设置文本框属相不可用
          if(dataInfo.codeKey=="appid"){
              this.disInputPram=true;
          }else{
              this.disInputPram=false;
          }
        },

        //确认修改按钮事件
        submit(){
           this.$confirm("确认修改吗", "提示", {}).then(() => {
            this.editLoading = true;
            let params = this.ParameterForm;
            let update_id = params[0].id;
            let update_value = params[0].value;
            this.$api.user.updateTqConfig(update_id,update_value).then(res => {
              this.editLoading = false;
              if (res.errorCode == 0) {
                this.$message({ message: "操作成功", type: "success" });
                this.dialogParameter = false;
                this.getTqConfig();
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
              
            });
          });
        }
      },

      created(){

      },

      mounted(){
        this.getTqConfig();
      }
    }
</script>

<style scoped>
  .outcryconfiguration{
  padding-left: 3%;
}
  .outcryconfiguration h1{
    font-weight: 700;
    float: left;
    display: block;
  }
  .outcryconfiguration .el-table{
    display: block;
    margin-top: 150px;
  }
  .el-table th>.cell{
    text-align: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }
</style>
<style>

  .outcryconfiguration .el-table th>.cell{
    text-align: center;
  }
  .outcryconfiguration .el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
    text-align: center;
  }
</style>

